<template>
  <div :id="editorId">
    <textarea v-model="content"></textarea>
  </div>
  <!--  <div>{{content}}</div>-->
</template>

<script>

const defaultConfig = {
  width: "98%", //宽度
  height: "100%", //高度
  path: "/lib/editor.md/lib/", //
  disabledKeyMaps: true,  // 关闭快捷键
  codeFold: true, // 代码折叠
  // watch: false,
  previewCodeHighlight: true, // 预览区高亮代码
  htmlDecode: true,       // 开启 HTML 标签解析，为了安全性，默认不开启
  emoji: true, //使用表情
  taskList: true,
  tocm: false,         // Using [TOCM] //使用目录
  tex: true,                   // 开启科学公式TeX语言支持，默认关闭
  flowChart: true,             // 开启流程图支持，默认关闭
  sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
  toolbar: false,
  readOnly: true,
  previewTheme: "dark",
  editorTheme: "tomorrow-night-eighties",


  onload: function () { //预览
    this.previewing();
  }
}

export default {
  name: "EditorMarkdown",
  props: {
    editorId: {
      type: String,//editor名字
      default: 'editor-md',
    },
    config: { // 编辑器配置
      type: Object,
      default: null
    },
    value: {
      type: String, //editor值
      default: '',
    },
  },
  data() {
    return {
      editor: null,
      content: ''
    }
  },
  watch: {
    // content(val) {
    //   this.$emit('input', val)
    // },
    value(newVal) {
      // alert(newVal);
      this.content = newVal;
      if (this.editor && this.editor.cm) this.editor.cm.setValue(newVal);
    }

  },
  created() {
    this.content = this.value
  },
  mounted() {
    //我们传入id和配置就可创建我们的编辑器
    // eslint-disable-next-line no-undef

    this.editor = editormd(this.editorId, this.getConfig());
  },

  methods: {
    //获取编辑器所需的配置，如果没有传入config参数，我们就是用默认配置
    getConfig() {
      if (this.config) {
        return {...defaultConfig, ...this.config};
      } else {
        return defaultConfig
      }
    }
  },
  destroyed() {

  }
}
</script>
